<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Item - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-item>
      <ion-label>Item Text</ion-label>
    </ion-item>

    <ion-item button color="danger">
      <ion-label>Item Tappable Danger</ion-label>
    </ion-item>

    <ion-item button color="danger" class="ion-activated">
      <ion-label>Item Tappable Danger.activated</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>
        <h1>Item Multiline Text</h1>
        <h2>Heading</h2>
        <h3>Heading</h3>
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label>Item Icons</ion-label>
      <ion-icon name="heart" slot="end"></ion-icon>
      <ion-icon name="star" slot="start"></ion-icon>
    </ion-item>

    <ion-item>
      <ion-label>Item Button</ion-label>
      <button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</button>
      <button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></button>
    </ion-item>

    <ion-item>
      <ion-label>Item Avatar</ion-label>
      <ion-avatar slot="start"
        ><img src=""
      /></ion-avatar>
      <ion-avatar slot="end"
        ><img src=""
      /></ion-avatar>
    </ion-item>

    <ion-item>
      <ion-label>Item Thumbnail</ion-label>
      <ion-thumbnail slot="start"
        ><img src=""
      /></ion-thumbnail>
      <ion-thumbnail slot="end"
        ><img src=""
      /></ion-thumbnail>
    </ion-item>
  </body>

  <style>
    body {
      margin: 0;
    }
  </style>
</html>
